<!-- 商户模板弹窗 -->
<template>
  <el-dialog
    title="商户模版"
    :visible="visible"
    width="1000px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
    append-to-body
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <ele-pro-table
        v-if="where.channel_id"
        ref="table"
        :where="where"
        :datasource="url"
        :method="'post'"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)"
      >
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit(null)"
            v-if="permission.includes('sys:channeltemplate:add')"
            >添加
          </el-button>
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row)"
            v-if="permission.includes('sys:channeltemplate:edit')"
            >修改
          </el-link>
        </template>
      </ele-pro-table>
    </el-form>
    <MerchantTemplateEdit
      :data="current"
      :visible.sync="showMerchantTemplateEdit"
      :channel_id="form.id"
      @done="reload"
    />
  </el-dialog>
</template>

<script>
// import uploadImageFin from '../../../components/uploadImageFin.vue'
import { mapGetters } from 'vuex'
import MerchantTemplateEdit from './MerchantTemplate-edit.vue'

export default {
  name: 'PaymentAccountEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  computed: {
    ...mapGetters(['permission'])
  },
  created() {
    if (this.data) {
      this.form = Object.assign({}, this.data)
      this.$set(this.where, 'channel_id', this.form.id)
      this.isUpdate = true
    } else {
      this.form = {}
      this.isUpdate = false
    }
  },
  components: { MerchantTemplateEdit },
  data() {
    return {
      url: '/Channeltemplate/index',
      // 表单数据
      current: null,
      form: Object.assign({}, this.data),
      where: {
        channel_id: ''
      },

      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },
        {
          prop: 'id',
          label: 'ID',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'name',
          label: '参数名称',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'key',
          label: 'KEY',
          showOverflowTooltip: true,
          align: 'center'
        },
        {
          prop: 'is_null',
          label: '是否必填',
          showOverflowTooltip: true,
          align: 'center',
          formatter: (row, column, cellValue) => {
            if (cellValue == 0) {
              return '否'
            } else if (cellValue == 1) {
              return '是'
            }
          }
        },
        {
          prop: 'type',
          label: '填写类型',
          showOverflowTooltip: true,
          align: 'center',
          formatter: (row, column, cellValue) => {
            if (cellValue == 1) {
              return 'input'
            } else if (cellValue == 2) {
              return 'textarea'
            }
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: 'right'
        }
      ],
      showMerchantTemplateEdit: false,
      selection: [],
      // 表单验证规则
      rules: {},
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    }
  },
  watch: {},
  methods: {
    /* 保存编辑 */
    // changeAppid(val) {
    //   this.$set(this.form, 'app_id', val)
    //   console.log(this.form)
    // },
    openEdit(row) {
      this.current = row
      this.showMerchantTemplateEdit = true
    },
    reload() {
      this.$refs.table.reload({ where: this.where })
    },

    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>

<style scoped>
::v-deep .room_add_img {
  margin: 0px !important;
}
::v-deep .finish_room2 .room_img {
  margin: 0px !important;
}
</style>
